<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 继承 */
    /* ******************** */
    /* 可以直接选中p标签 */
    div p {
      color: red;
    }

    /* 继承 */
    /* ******************** */
    /* 不能直接选中p标签，对于p标签来说也是继承 */
    .father {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="father">
    <!-- 2、p标签的文字颜色：red -->
    <p class="son">
      <!-- 1、span标签的样式肯定是继承得来的，那么都是继承，就得看从谁身上继承的（子承父业）， -->
      <!-- 从son身上继承，那么转而判断son的优先级就可以得出答案 -->
      <span>文字</span>
      <!-- 注意：如果上面这种情况span样式全是继承得来的，那么我们需要去明确父元素的样式是什么就可以得出span的样式了 -->
      <!-- 继承都是子承父业，会优先从它父亲那儿来继承对应的样式 -->
    </p>
  </div>
</body>

</html>